<template>
  <div class="wrap">
    <div class="list-search">文章标题
      <input type="text" v-model="search" @keyup.enter="searchClick" placeholder="请输入搜索内容" autofocus="autofocus">
      <div class="icon" @click="searchClick"><div class="iconfont icon-sousuo"></div></div>
    </div>
    <div class="push-btn">
      <div class="list-del" @click="checkedDel">删除</div>
      <div class="list-btn" @click="isShow">添加</div>
    </div>
    <!-- <div class="title">
      <input class="title-ckbox" type="checkbox" :checked="isSelectAll"  @click="allCheck">
      <div class="title-item">文章ID</div>
      <div class="title-item">文章标题</div>
      <div class="title-item">文章标签</div>
      <div class="title-item">作者</div>
      <div class="title-item">操作</div>
    </div> -->
  
    <el-table
    :data="articleList"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="文章ID"
      header-align="center"
      align="center">
    </el-table-column>
    <el-table-column
      prop="title"
      label="文章标题"
      header-align="center"
      align="center">
    </el-table-column>
    <el-table-column
      prop="label"
      label="文章标签"
      header-align="center"
      align="center">
    </el-table-column>
    <el-table-column
      prop="author"
      label="作者"
      header-align="center"
      align="center">
    </el-table-column>
    <el-table-column
      label="操作"
      header-align="center"
      align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>

    <!-- <div v-for="(item, index) in articleList" :key="index" class="content">
      <input class="title-ckbox" type="checkbox" :checked="item.isSelect" @click="cellCheck(index)" >
      <div class="title-item">
        <input v-if="showEdit[index]" v-model="editList.id">
        <div v-if="!showEdit[index]">{{item.id}}</div>
      </div>
      <div class="title-item">
        <input v-if="showEdit[index]" v-model="editList.title">
        <div v-if="!showEdit[index]">{{item.title}}</div>
      </div>
      <div class="title-item">
        <input v-if="showEdit[index]" v-model="editList.label">
        <div v-if="!showEdit[index]">{{item.label}}</div>
      </div>
      <div class="title-item">
          <input v-if="showEdit[index]" v-model="editList.author">
          <div v-if="!showEdit[index]">{{item.author}}</div>
       </div>
      <div class="title-item">
        <span v-if="!editShow[index]" class="edit-btn" @click="listEdit(index)">编辑</span>
        <span v-if="editShow[index]" class="con-btn" @click="listCon(index)">确定</span>
        <span class="delete-btn" @click="listDel(index)">删除</span>
      </div>
    </div> -->

    <div :class="{active:pageIndex===index}" class="page" v-for="(item,index) in totalPage" @click="pageClick(index)" :key="'page'+index">
      {{item}}
    </div>
    
    <div v-if="totalPage != 0" style="display:inline-block;">共{{totalPage}}页</div>

    <div class="mongolia" v-show="dialogShow" >
    <transition name="fade">
      <div class="dialog" v-show="dialogShow" >
          <div class="dialog-title">
              <i @click="isShow">X</i>
          </div>
          <div class="dialog-item">
              <div>文章ID</div>
              <input type="text" autofocus="autofocus" v-model="copyList.id" />
          </div>
          <div class="dialog-item">
              <div>文章标题</div>
              <input type="text"  v-model="copyList.title" />
          </div>
          <div class="dialog-item" >
              <div>文章标签</div>
              <input type="text"  v-model="copyList.label" />
          </div>
          <div class="dialog-item">
              <div>作者</div>
              <input type="text"  v-model="copyList.author" />
          </div>
          <div class="confirm-btn" @click="confirmBtn">确定</div>
      </div>
      </transition>
    </div>
    
</div>
</template>

<script>
import { $get,$post } from '../network/common'
export default {
  name: "Form",
  data() {
    return {
      articleList: [
        {id:""}
      ],
      copyList:{
          id:'',
          title:'',
          label:'',
          author:'',
          isSelect:false
      },
      editList:[{
          id:'',
          title:'',
          lable:'',
          author:''}],
      dialogShow:false,
      search:'',
      isdisabled:1,
      articleList2:'',
      isSelectAll:false,
      isCellSelect:'',
      editShow:[],
      showEdit:[],
      totalPage:'',
      pageIndex:0,
      judge:0
    }
  },
  mounted() {
    this.getArticleList()
  },
  methods:{
      //网络请求
      async getArticleList(index){
           let page = index
           let url="/v1/test/getArticle?page="+page
           let res= await $get(url)     
           let list = res.data.list
           this.totalPage = res.data.totalPage
           console.log(res);
           
           this.articleList = list.map((item)=>{
             return{
               isSelect:false,
               ...item
             }
           })
       },
      isShow(){
          this.dialogShow=!this.dialogShow
          this.copyList={}
          this.judge = 1
      },
      handleDelete(index){      
        $post('/v1/test/deleteArticle',{
            id:this.articleList[index].id
          }).then((res)=>{
            this.getArticleList()
          })
      },
      listDel(index){
          $post('/v1/test/deleteArticle',{
            id:this.articleList[index].id
          }).then((res)=>{
            this.getArticleList()
          })
      },
      listEdit(index){
          if(this.isdisabled === 1){ 
            this.editList = {}
          //将对象添加到另一个对象 第一个参数是接受者，第二个参数是源
          Object.assign(this.editList,{
            id:this.articleList[index].id,
            title:this.articleList[index].title,
            label:this.articleList[index].label,
            author:this.articleList[index].author, 
            isSelect:this.articleList[index].isSelect
          })      
          //  将一个对象转换为字符串的形式 
          //   var a = JSON.stringify(this.editList)
          //   console.log(a);
            this.$set(this.showEdit,index,true)
            this.$set(this.editShow,index,true)
            this.isdisabled = 0
          }
      },
      handleEdit(index,row){
        this.dialogShow=!this.dialogShow
        Object.assign(this.copyList,{
            id:this.articleList[index].id,
            title:this.articleList[index].title,
            label:this.articleList[index].label,
            author:this.articleList[index].author
        })
        this.judge = 0
      },
      listCon(index){
        this.$set(this.showEdit,index,false)
        this.$set(this.editShow,index,false)
        this.$set(this.articleList,index,this.editList)
        $post('/v1/test/editArticle',{
          id:this.articleList[index].id,
          title:this.articleList[index].title,
          label:this.articleList[index].label,
          author:this.articleList[index].author,
        }).then(res=>{
            this.getArticleList()
          })
        this.editList = {}
        if(this.isdisabled === 0){
        this.isdisabled=1
        }  
      },
      confirmBtn(val){
        if(this.judge === 1){
          $post('/v1/test/addArticle',{
            id:this.copyList.id,
            title:this.copyList.title,
            label:this.copyList.label,
            author:this.copyList.author,
          }).then(res=>{
            this.getArticleList()
          })
        }else if(this.judge === 0){
          $post('/v1/test/editArticle',{
          id:this.copyList.id,
          title:this.copyList.title,
          label:this.copyList.label,
          author:this.copyList.author,
        }).then(res=>{
            this.getArticleList()
          })
        }
          
          this.copyList={}
          this.dialogShow=false

     },
     searchClick(){ 
       this.articleList2 = this.articleList.filter((item)=>{
         return item.title.indexOf(this.search) > -1
       })
       this.articleList = this.articleList2
     },
     allCheck(){
       this.isSelectAll=!this.isSelectAll
       this.articleList.forEach(item => {
         item.isSelect = this.isSelectAll  
       })
     },
     cellCheck(index){
       //单行勾选框切换
       this.articleList[index].isSelect = !this.articleList[index].isSelect
       //数组中每一个是否都满足 === true 如果满足放回true 不满足返回false
       this.isSelectAll = this.articleList.every(item => item.isSelect===true)
     },
     checkedDel(){
       for(let i=0;i<=this.articleList.length;i++){
         try{
           if(this.articleList[i].isSelect==true){
            $post('/v1/test/deleteArticle',{
              id:this.articleList[i].id
          }).then(res=>{
            this.getArticleList()
            })
          }
         }catch(e){
           return 
         }
       }
     },
     pageClick(index){
       this.pageIndex = index
       this.getArticleList(index+1)
     } 
  }
};
</script>
<style scoped>
.mongolia{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
}
.dialog{
    position: fixed;
    left:50%;
    margin-left:-200px;
    top:50%;
    margin-top:-200px;
    height: 400px;
    width: 400px;
    border:1px solid #000;
    background-color: #fff;
}
.dialog-title{
    background: #000;
    height: 40px;
}
.dialog-item input{
    margin-right: 40px;
    height: 35px;
}
.dialog-item{
    display: flex;
    justify-content: space-between;
    margin-top:15px;
    padding:5px 25px;
}
.dialog-title i{
    position: absolute;
    color: #fff;
    right:25px;;
    top:0;
    line-height: 40px;
}
.wrap {
  padding: 7px 30px;
  text-align: left;
}
.add-btn {
  width: 80px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background: #1890FF;
  margin-bottom: 10px;
  cursor: pointer;
}
.title {
  display: flex;
  background: #F2F2F2;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
}
.content {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
}
.title-item {
  flex: 1;
  height: 50px;
  line-height: 50px;
}
.title-ckbox{
  margin-top: 20px;
  margin-right: 20px;  
}
.title-item input{
    width: 80%;
}
.edit-btn {
  padding: 5px 10px;
  background: #1890FF;
  font-size: 12px;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}
.con-btn{
  padding: 5px 10px;
  background: #1890FF;
  font-size: 12px;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}
.confirm-btn{
  background: #1890FF;
  color: #fff;
  border-radius: 5px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width:65px;
  margin-left:25px;
}
.delete-btn {
  padding: 5px 10px;
  background: red;
  font-size: 12px;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.list-del{
  background: red;
  color: #fff;
  border-radius: 5px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  margin-right:10px;
  width:85px;
}
.push-btn{
  display: flex;
}
.list-btn{
  background: #1890FF;
  color: #fff;
  border-radius: 5px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  margin-bottom: 10px;
  width:85px;
}
.list-search input{
  margin:10px 20px;
  padding:5px;
  font-size:15px;
  height: 35px;
}
.icon{
  display: inline-block;
  height: 35px;
  width: 60px;
  line-height: 35px;
  text-align: center;
  border-radius: 5px;
  background: #1890FF;
  color: #fff;
}

.fade-enter-active{
  animation: slideIn .5s;
}
.fade-leave-active{
  animation: slideOut .5s;
}

@keyframes slideIn {
  0%{
    transform: scale(0);
    opacity: 0;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideOut{
  0%{
    transform: scale(1);
    opacity: 1;
  }
  100%{
    transform: scale(0);
    opacity: 0;
  }
}

.page{
  display: inline-block;
  width:32px;
  height: 28px;
  line-height: 28px;
  margin:5px 5px;
  background-color: #f4f4f5;
  color:#606266;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
}
.active{
  background-color: #1890FF;
  color: #fff;
}
</style>
